<template>
    <el-submenu :index="`${index}`">
        <!-- 标题 -->
        <template slot="title">
            <icon :name="menu.icon"></icon>
            <span slot="title">{{ menu.name }}</span>
        </template>
<!--        <template v-for="(item, i) in menu.child">-->
<!--            &lt;!&ndash; 主菜单 &ndash;&gt;-->
<!--            <el-menu-item v-if="!item.child"-->
<!--                          :key="i"-->
<!--                          :index="append + index + '-' + i"-->
<!--                          :route="{path: item.link}">-->
<!--                <icon :name="item.icon"></icon>-->
<!--                <span>{{ item.name }}</span>-->
<!--            </el-menu-item>-->
<!--            &lt;!&ndash; 子菜单 &ndash;&gt;-->
<!--            <admin-sidebar-sub-menu v-else-->
<!--                                    :key="i"-->
<!--                                    :menu="item"-->
<!--                                    :index="i"-->
<!--                                    :append="append + i + '-'"></admin-sidebar-sub-menu>-->
<!--        </template>-->
    </el-submenu>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class AdminSidebarSubMenu extends Vue {
  @Prop({type: Object}) menu?: any
  @Prop({type: Number, default: -1}) index!: number
  @Prop({type: String}) append!: string
}
</script>

<style lang="scss" scoped>
.el-submenu {
    .el-menu-item {
        height: 40px;
        line-height: 40px;
        font-weight: 500;
    }
}
</style>
